<template>
	<div class="chat-message" v-if="chatMessageModalIsShow">
		<div class="content" v-if="step==0">
			<div class="title">{{$t("给客服留言")}}</div>
			<div class="h2">
				{{$t("您可以填写App使用上遇到的问题，也可以提出其他问题。等客服收到信息后，会第一时间与您进行视频/语音通话。请您保持App为开启状态。")}}
			</div>
			<div class="h3">{{$t("留言内容")}}</div>
			<textarea class="textarea" v-model="chatMessage" :placeholder="$t('留言内容')"></textarea>
			<div class="h3">{{$t("留下联系方式")}}</div>
			<div class="h4">{{mobile}}</div>
			<div class="between">
				<div class="submit" v-if="!loading" @click="chatMessageSubmit">{{$t('提交')}}</div>
				<div class="submit" v-else>{{$t('正在提交')}}</div>
				<div class="default" @click="close">{{$t('关闭')}}</div>
			</div>
		</div>
		<div class="content content2" v-else>
			 
			<image v-if="lang!='ru'" src="/static/chat-loading-cn.png" mode="widthFix" style="width: 100%;"></image>
			<image v-else src="/static/chat-loading-ru.png" mode="widthFix" style="width: 100%;"></image>

			<!-- <div class="title">{{$t("正在受理")}}</div> -->
			<!-- <div class="h4">请您不要离开本页面，客服将在2分钟内联系您</div> -->

			<div class="countDown">{{parseCountDown()}}</div>

			<div class="between">
				<div class="default" @click="close2">{{$t('离开')}}</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		HTTP_REQUEST_URL,
		IMAGE_URL,
		HTTP_IMG_UTL
	} from '@/config/app';
	export default {
		props: ["chatMessageModalIsShow", "mobile"],
		data() {
			return {
				step: 0,
				timer: null,
				countDown: 120,
				loading: false,
				chatMessage: "",
				lang:uni.getStorageSync("lang")
			}
		},
		created() {},
		methods: {
			startCountDown() {
				this.countDown--
				this.timer = setInterval(() => {
					this.countDown--
					if (this.countDown <= 0) {
						clearInterval(this.timer)
					}
				}, 1000)

			},
			parseCountDown() {
				return `${String(parseInt(this.countDown/60)).padStart(2,0)}:${String(parseInt(this.countDown%60)).padStart(2,0)}`;
			},
			close2() {
				uni.showModal({
					title: this.$t("客服即将联系您"),
					content: this.$t("客服即将联系您,请保持应用在线"),
					cancelText: this.$t("否"),
					confirmText: this.$t("是"),
					success: e => {
						if (e.confirm) {
							this.close()
						}
					}
				})
			},
			close() {
				this.step = 0;
				this.countDown = 120
				this.loading = false;
				this.chatMessage = "";
				clearInterval(this.timer)
				this.$emit("update:chatMessageModalIsShow", false)
			},
			chatMessageSubmit() {
				// HTTP_REQUEST_URL
				if (uni.getStorageSync("user_id") == '') {
					uni.showToast({
						title: this.$t('请您先登录账号'),
						icon: "none"
					})
					setTimeout(() => {
						this.$u.route({
							url: '/pages/user/login/login'
						})
					}, 2000)
					return
				}
				if (!this.chatMessage) {
					uni.showToast({
						title: this.$t('请输入您的留言内容(200字以内)'),
						icon: "none"
					})
					return
				}
				this.loading = true


				this.startCountDown();
				this.step = 1;

				uni.request({
					url: HTTP_REQUEST_URL + "/crontab/message_board",
					data: {
						user_id: uni.getStorageSync("user_id"),
						mobile: uni.getStorageSync("mobile"),
						lang: uni.getStorageSync("lang"),
						content: this.chatMessage
					},
					header: {
						xzdToken: uni.getStorageSync("xzdToken")
					},
					success: res => {
						uni.showToast({
							title: this.$t('提交成功'),
							icon: "none"
						})
						this.loading = false;
						//this.close()
						this.chatMessage = ""
					},
					fail() {
						uni.showToast({
							title: this.$t("提交失败"),
							icon: "none"
						})
						this.loading = false;
					},
					complete() {
						this.loading = false;
					}
				})
			},
		}
	}
</script>

<style lang="less">
	.countDown {
		color: #ff6060;
		text-align: center;
		font-size: 80rpx;
		font-weight: bold;
	}

	.chat-message {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
		top: 0;
		left: 0;
		z-index: 999;
		position: fixed;

		.h2 {
			color: #796918;
			font-size: 22rpx;
			background-color: #fffae1;
			padding: 15rpx;
			border-radius: 10rpx;
			line-height: 32rpx;
		}

		.h3 {
			color: #666;
			font-weight: bold;
			margin-top: 16rpx;
			margin-bottom: 4px;
			font-size: 24rpx;
		}

		.h4 {
			color: #3d3d3d;
			font-weight: bold;
			background-color: #f5f5f5;
			padding: 20rpx 10rpx;
			box-sizing: border-box;
			font-size: 30rpx;
			border-radius: 10rpx;
		}

		.title {
			color: #3d3d3d;
			text-align: center;
			margin-bottom: 20rpx;
			font-weight: bold;
			font-size: 30rpx;
		}

		.content {
			width: 550rpx;
			background-color: #fff;
			border-radius: 20rpx;
			padding: 30rpx;
		}

		.default {
			background-color: #fff;
			border-radius: 10rpx;
			color: #3d3d3d;
			height: 70rpx;
			font-size: 26rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 20rpx;
			width: 100%;
			border: 1rpx solid #ddd;
		}

		.between {
			display: flex;
			flex-direction: column;
		}

		.submit {
			width: 100%;
			background-color: #000;
			border-radius: 10rpx;
			height: 70rpx;
			font-size: 26rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 20rpx;
			text-align: center;
			padding: 10rpx;
			box-sizing: border-box;
		}

		.textarea {
			background-color: #f5f5f5;
			width: 100%;
			height: 300rpx;
			border-radius: 10rpx;
			color: #3d3d3d;
			font-size: 28rpx;
			padding: 20rpx;
			box-sizing: border-box;
		}
	}
</style>